<template>
    <div class="addCheckNotes-content-box">
        <!-- :dialog-style="{ top: '40px' }" -->
         <!-- 技术审评笔记添加审评地点-->
        <a-modal
            :title="this.fromSate.id?'编辑审评记录':'新增审评记录'"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="isEyeAll?1205:955"
            :dialogStyle="{top:'20px'}"
            :forceRender="forceRender"
            class="addCheckNotes-modal-v"
        >
        <!-- :width="945" -->
            <div v-if="fileList.length" style="display: flex;justify-content: flex-end;margin-bottom: 5px;" >
                <a-button class="blue-btn" type="primary" :icon="isEyeAll?'close-circle':'eye'" @click="isEyeAll = !isEyeAll" >{{isEyeAll?'关闭预览':'预览全部文件'}}</a-button>
            </div>
            <div class="addCheckNotes-modal-box-v" >
                <!--overflow: auto; :style="{maxHeight:fileList.length?'calc(100vh - 220px)':'calc(100vh - 185px)'}" -->
                <div style="flex: 1;padding-bottom: 10px;" >
                    <table border bordercolor="#d9d9d9" style="width: 100%;">
                        <tr>
                            <td colspan="6">
                                <a-spin :tip="checkNotesTip" :spinning="checkNotesSpinning" >
                                    <div class="add-check-notes">
                                        <div v-for="(item,index) in fileList" :key="index" class="addCheckNotes-item-box " >
                                            <div class="checkNotes-file-item an-upload-list-item" >
                                                <div class="an-upload-list-item-info" >
                                                    <img style="height:100%;width:auto;max-width: 100%;object-fit: contain;" :src="item.base64Url" />
                                                </div>
                                                <div class="an-upload-list-item-actions">
                                                    <a-icon class="icon-v-nf" type="eye" @click="eyeCheckFile(item)"/>
                                                    <a-icon type="delete" @click="deleteCheckFile(item,index)" />
                                                </div>
                                            </div>
                                        </div>
                                        <div :key="uploadBoxKey">
                                            <a-upload  style="display: inline-block;" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="uploadFile">
                                                <div class="addCheckNotes-item-box addCheckNotes-plus-text">
                                                    <a-icon class="plus-icon" type="plus" />
                                                    <div class="upload-text" >Upload</div>
                                                </div>
                                            </a-upload>
                                            <!-- v-if="fromSate.fddmc || fromSate.id"
                                            <div v-else class="addCheckNotes-item-box addCheckNotes-plus-text" @click="noDDMCClick" >
                                                <a-icon class="plus-icon" type="plus" />
                                                <div class="upload-text" >Upload</div>
                                            </div> -->
                                        </div>
                                    </div>
                                </a-spin>
                            </td>
                        </tr>
                        <!-- <tr>
                            <td class="title-left-v">
                                <span style="color: #ed5565;" >*</span>
                                审评地点
                            </td>
                            <td colspan="5">
                                <a-textarea 
                                    ref="fddmcRef"
                                    v-model="fromSate.fddmc"
                                    :autosize="{ minRows: 1, maxRows: 3 }"
                                    placeholder="请输入审评地点"
                                ></a-textarea>
                            </td>
                        </tr> -->
                        <tr>
                            <td class="title-left-v">
                                <div style="display: flex;justify-content: flex-end;" >
                                    <span style="display: flex;width: 64px;justify-content: space-between;" >
                                        <span>功</span>
                                        <span>能</span>
                                        <span>间</span>
                                    </span>
                                </div>
                            </td>
                            <td colspan="5">
                                <a-spin tip="正在加载中..." :spinning="gnjSpinning" >
                                    <vxe-pulldown ref="pulldownRef" destroy-on-close style="width: 100%;">
                                        <template #default>
                                            <a-textarea 
                                                v-model="fromSate.fjtk"
                                                :autosize="{ minRows: 1, maxRows: 3 }"
                                                placeholder="请选择或输入具体库"
                                                @focus="focusEvent" @keyup="keyupEvent"
                                            ></a-textarea>
                                            <!-- <vxe-input v-model="searchName" placeholder="可搜索的大数据下拉框" @focus="focusEvent" @keyup="keyupEvent"></vxe-input> -->
                                        </template>
                                        <template #dropdown>
                                            <vxe-list height="200" class="my-dropdown2" :data="optionList" auto-resize style="border: 1px solid #38f;">
                                            <template #default="{ items }">
                                                <div class="list-item2" v-for="(item,index) in items" :key="index" @click="selectEvent(item)" style="padding: 5px;border: 1px solid #d9d9d9;">
                                                    <span>{{ item }}</span>
                                                </div>
                                            </template>
                                            </vxe-list>
                                        </template>
                                    </vxe-pulldown>
                                </a-spin>
                                <!-- <a-textarea 
                                    v-model="fromSate.fjtk"
                                    :autosize="{ minRows: 1, maxRows: 3 }"
                                    placeholder="请输入具体库"
                                ></a-textarea> -->
                            </td>
                        </tr>
                        <tr>
                            <td class="title-left-v">
                                <!-- <span style="color: #ed5565;" >*</span> -->
                                描&emsp;&emsp;述
                            </td>
                            <td colspan="5">
                                <a-textarea 
                                    v-model="fromSate.fmsnr"
                                    :autosize="{ minRows: 3, maxRows: 18 }"
                                    placeholder="请输入描述"
                                ></a-textarea>
                            </td>
                        </tr>
                    </table>
                </div>
                <div v-if="isEyeAll" style="width: 590px;max-height: calc(100vh - 220px);overflow: auto;">
                    <div v-for="(item,index) in fileList" :key="index" style="border: 1px solid #d9d9d9;margin-bottom: 5px;" >
                        <img style="max-width:100%;" :src="item.base64Url" :alt="item.fwjxsmc+item.fwjlx">
                    </div>
                </div>
            </div>
            <previewRecordFile ref="previewRecordFileRef" />
        </a-modal>
    </div>
</template>
<script>
import {
    jcbjaddJcdd,
    jcbjupdateJcdd,
    jcbjjcbjWjById,
    jcbjuploadDdBjFile,
    spcyRsWjmbopenWjjl,
    spcySqsxWjjldeleteFileById,
    jcbjgetLsFjtk,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import blobType from '@/common/blobType'
import commpKindeditor from '@/components/commp-kindeditor/commpKindeditor.vue'
import previewRecordFile from './previewRecordFile.vue'
export default {
    components:{
        commpVxeTable,
        commpKindeditor,
        previewRecordFile,
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableKey:null,
            selectId:[],
            editvisible:false,
            selectData:{},
            isVisible:true,
            fromSate:{},
            commpKindeditorKey:null,
            addCheckNotesKey:null,
            forceRender:true,
            windowInnerHeight:window.innerHeight,
            uploadBoxKey:null,
            fileList:[],
            checkNotesSpinning:false,
            checkNotesTip:'正在加载中...',
            isEyeAll:false,
            optionList:[],
            mockData:[],
            gnjSpinning:false,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        async getData(val){
            this.fileList = []
            this.fromSate = val
            this.uploadBoxKey = Date.now()
            this.gnjSpinning = true
            await jcbjgetLsFjtk({sqsxid:this.fromSate.sqsxid}).then(res=>{
                if(res.code == 200){
                    this.optionList = JSON.parse(JSON.stringify(res.result))
                    this.mockData = JSON.parse(JSON.stringify(res.result))
                }else{
                    this.optionList = []
                    this.mockData = []
                }
                this.gnjSpinning = false
            })
            if(this.fromSate.id){
                await this.getImgData()
            }
            // this.$nextTick(()=>{
            //     if(!this.fromSate.fddmc){
            //         this.$refs.fddmcRef.focus()
            //     }
            // })
            
        },
        focusEvent(){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                $pulldown.showPanel()
            }
        },
        keyupEvent(){
            this.optionList = this.fromSate.fjtk ? this.mockData.filter((item) => item.indexOf(this.fromSate.fjtk) > -1) : this.mockData
        },
        selectEvent(item){
            const $pulldown = this.$refs.pulldownRef
            if ($pulldown) {
                this.fromSate.fjtk = item
                $pulldown.hidePanel().then(() => {
                this.optionList = this.mockData
                })
            }
        },
        async getImgData(){
            this.checkNotesSpinning = true
            let res = await jcbjjcbjWjById({id:this.fromSate.id})
            if(res.code == 200){
                //console.log('我获取了什么文件',res)
                // this.fileList = res.result.records
                this.fileList = []
                if(res.result && res.result.records && res.result.records.length){
                    for(let index = 0; index <= res.result.records.length-1; index++){
                        let item = res.result.records[index]
                        let base64Url = await this.convertFiles(item)
                        let itemArr = this.fileList.filter(i=>{i.id == item.id})
                        if(!itemArr.length){
                            let data = {
                                ...item,
                                base64Url:base64Url,
                            }
                            this.fileList.push(data)
                        }
                    }
                    
                }
            }else{
                this.$message.warning(res.message)
            }
            this.$nextTick(()=>{
                this.checkNotesSpinning = false
            })
        },
        async convertFiles(row) {//转化文件
            try {
                //请求接口
                let res = await spcyRsWjmbopenWjjl({id:row.id})
                let base64 = await "data:image/png;base64," +
                                btoa( new Uint8Array(res).reduce( (data, byte) => data + String.fromCharCode(byte), "" ))
                // //console.log('得到什么base64位',base64)
                return base64
            } catch (error) {
                //console.log('处理某个文件错误',row)
                //console.log('处理文件错误',error)
                return ''
            }
        },
        async uploadFile({file}){
            // type == "image/jpeg"
            let res1 = ''
            if(!this.fromSate.id){
                // fddmc:this.fromSate.fddmc
                res1 = await jcbjaddJcdd(this.fromSate)
                //console.log('我新增了什么',res1.result)
                if(res1.code == 200){
                    this.$emit('addCheckNotesSuccess',this.fromSate)
                }
            }
            
            //console.log('我获取到什么东西',file)
            if(!res1 || (res1 && res1.code == 200)){
                this.fromSate.id = res1 && res1.result && res1.result.id?res1.result.id:this.fromSate.id
                let type = 0
                if(file.type == 'image/jpeg'){
                    type = 1
                }
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("id",this.fromSate.id);
                fileData.append("wjbs",type);
                this.checkNotesTip = '正在上传中...'
                this.checkNotesSpinning = true
                jcbjuploadDdBjFile(fileData).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.checkNotesSpinning = false
                        this.checkNotesTip = '正在加载中...'
                        this.getImgData()
                    }else{
                        this.$message.warning(res.message)
                        this.checkNotesSpinning = false
                    }
                })
            }else{
                this.$message.warning(res1.message)
            }
            

        },
        noDDMCClick(){
            this.$message.warning('请先输入审评地点')
        },
        eyeCheckFile(trem,arr){//预览审评笔记文件
            this.$refs.previewRecordFileRef.getData(trem,arr)
            this.$refs.previewRecordFileRef.previewVisible = true
        },
        deleteCheckFile(item,index,){//删除审评笔记文件
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    spcySqsxWjjldeleteFileById({id:item.id}).then(res=>{
                        if(res.code == 200){
                            that.fileList = that.fileList.filter((a,i)=>{return i !== index})
                            that.$emit('addCheckNotesSuccess',that.fromSate)
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        handleOk(){
            // if(!this.fromSate.fddmc){
            //     this.$message.warning('请输入审评地点')
            //     return
            // }
            if(this.fromSate.id){
                jcbjupdateJcdd(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addCheckNotesSuccess',this.fromSate)
                        this.visible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                jcbjaddJcdd(this.fromSate).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                        this.$emit('addCheckNotesSuccess',this.fromSate)
                        this.visible = false
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }
            
        },
        
    }
}
</script>
<style lang="less">
.addCheckNotes-modal-v{
    .ant-modal-body{
        padding:8px;
        // max-height: calc(100vh - 152px);
        // overflow: auto;
    }
}
// .addCheckNotes-content-box{
    .extractsi-top-box{
        margin-top: 10px;
        display: flex;
        align-items: center;
        background-image: linear-gradient(to bottom, #e7f3ff, #fff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff, #e7f3ff);
        background-size: 100% 100% !important;
        padding:8px;
        border:1px solid #d9d9d9;
        .situation-left-title{
            display: inline-block;
            background-color: #e6f7ff;
            text-align: left;
            font-weight: 600;
            font-size: 16px;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
            margin-right: 8px;
        }
    }
    .addCheckNotes-modal-box-v{
        display: flex;
        .ant-spin-nested-loading{
            height: auto;
        }
        .add-check-notes{
            display:flex;
            flex-wrap:wrap;
            .addCheckNotes-item-box{
                width: 104px;
                height: 104px;
                margin: 4px;
                border: 1px solid #d9d9d9;
                border-radius: 4px;
                overflow:hidden;
                display:flex;
                justify-content:center;
                align-items:center;
                .checkNotes-file-item{
                    width: 104px;
                    height: 104px;
                    // margin: 4px;
                    // border: 1px solid #d9d9d9;
                    border-radius: 4px;
                    overflow:hidden;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                }
                .an-upload-list-item{
                    position: relative;
                    float: left;
                    width: 104px;
                    height: 104px;
                    // margin: 0 3px 3px 0;
                    opacity: 1;
                }
                .an-upload-list-item-info{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
                
                .an-upload-list-item:hover .an-upload-list-item-info:before{
                    position: absolute;
                    z-index: 5;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,.5);
                    transition: all .3s;
                    content: " ";
                }
                
                .an-upload-list-item-actions{
                    z-index: 10;
                    width: 16px;
                    margin: 0 4px;
                    color: hsla(0,0%,100%,.85);
                    font-size: 18px;
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    left: 23%;
                    white-space: nowrap;
                    transform: translate(-50%,-50%);
                    opacity: 0;
                    transition: all .3s;
                }
                .icon-v-nf{
                    padding: 0 10px;
                }
                .an-upload-list-item:hover .an-upload-list-item-actions{
                    opacity: 1;
                }
            }
            
            .addCheckNotes-plus-text{
                border: 1px dotted #d9d9d9;
                background-color: #fafafa;
                display:flex;
                flex-direction:column;
                justify-content:center;
                .plus-icon{
                    font-size:32px;
                    color: #999;
                }
                .upload-text{
                    margin-top: 8px;
                    color: #666;
                }
            }
        }
        td{
            padding: 6px;
            height: 30px;
        }
        .title-left-v{
            text-align: right;
            width: 105px;
            font-weight: 600;
            font-size: 16px;
            background-color:#e6f7ff;
            font-family: simHei;
            color: rgba(0, 0, 0, 0.85);
        }
    }
// }


</style>